<template>
	<view>
		<view v-if="!msg"></view>
		<view class="u-p-y-20 u-text-center" v-else-if="msg.msgType==TYPES.RECALL">
			<text class="text-gray">{{self?'你':msg.nick}}撤回了一条消息</text>
		</view>
		<msg-inform v-else-if="msg.msgType==TYPES.INFORM" :info="msg.extras"/>
		<view class="msg_col" :id="`msg_${msg.id}`" :class="{self:self}" v-else @touchstart="onTouchstart" @touchmove="onTouchmove">
			<view class="msg_avatar" @tap="tapAvatar" @longpress="longAvatar">
				<u-avatar :src="master.saveAvatar||master.avatarUrl||msg.avatar" size="90" mode="square"></u-avatar>
			</view>
			<view class="msg_body">
				<view class="msg_top">
					<text v-if="!hidename" class="msg_nick u-font-24">{{master.remarks||master.userName||msg.nick}}</text>
					<text class="msg_time u-font-24">{{msg.createTime|formatTime}}</text>
				</view>
				<view class="msg_content">
					<view class="msg_det" @tap="tapMsg" @longpress="menu" >
						<msg-link :msg="msg" v-if="isLink(msg)"   :content="msg.content"></msg-link>
						<msg-text v-else-if="msg.msgType==TYPES.TEXT" :content="msg.content"/>
						<msg-pic v-else-if="msg.msgType==TYPES.IMG" :info="msg.extras" :msg="msg"></msg-pic>
						<msg-video v-else-if="msg.msgType==TYPES.VIDEO" :info="msg.extras" :msg="msg"></msg-video>
						<msg-face v-else-if="msg.msgType==TYPES.FACE" :msg="msg" :info="msg.extras"></msg-face>
						<msg-audio v-else-if="msg.msgType==TYPES.AUDIO" :info="msg.extras"></msg-audio>
						<msg-call v-else-if="msg.msgType==TYPES.CALL" :msg="msg"></msg-call>
						<msg-red v-else-if="msg.msgType==TYPES.RED" :info="msg.extras"></msg-red>
						<msg-notice v-else-if="msg.msgType==TYPES.NOTICE" :info="msg.extras"></msg-notice>
						<msg-file v-else-if="msg.msgType==TYPES.FILE" :info="msg.extras" :msg="msg"></msg-file>
						<msg-card v-else-if="msg.msgType==TYPES.CARD" :info="msg.extras"></msg-card>
					</view>
					
					<view class="msg_state">
						<u-loading v-if="msg.status=='loading'" mode="flower"></u-loading>
						<text v-else-if="msg.status=='error'" class="cuIcon-warn text-red u-font-34"></text>
						<text v-else-if="showRead" class="text-gray readed">
							<!-- <text class="cuIcon-roundcheck u-font-32" v-if="readed"></text> -->
							<text class="u-font-22">{{readedText()}}</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {dateDiff,jumpTo,isContainsLink} from "@/utils/util.js"
	import {formatTime} from "@/utils/data.js"
	import msgText from "./msgText.vue"
	import msgPic from "./msgPicture.vue"
	import msgVideo from "./msgVideo.vue"
	import msgAudio from "./msgAudio.vue"
	import msgCall from "./msgCall.vue"
	import msgRed from "./msgRed.vue"
	import msgFace from "./msgFace.vue"
	import msgNotice from "./msgNotice.vue"
	import msgCard from "./msgCard.vue"
	import msgFile from "./msgFile.vue"
	import msgInform from "./msgInform.vue"
	import MsgLink from './msgLink.vue'
	import {mapGetters} from "vuex"
	import {msgTypes} from "@/IM/index.js"
	import { ConversationType } from "@/entity/ConversationType"
	import DC from "@/DC/index.js"
	import { TYPES as redTypes } from "@/api/red"
	export default{
		components:{
			msgText,
			msgPic,
			msgVideo,
			msgAudio,
			msgCall,
			msgRed,
			msgFace,
			msgNotice,
			msgCard,
			msgFile,
			msgInform,
			MsgLink
		},
		data(){
			return{
				TYPES:msgTypes,
				startPoint:{
					x:0,
					y:0
				},
				isMove:false,
				master:{},
			}
		},
		computed:{
			...mapGetters('user',['userId']),
			self(){
				return this.msg.from == this.userId
			},
			readed(){
				if(!this.msg.readBody||isNaN(this.msg.readBody.unreadCount)){
					return false
				}
				const diff = this.msg.readBody.unreadCount
				if(diff<1){
					return true
				}
				return false
			},
			isMine(){
				return this.msg&&this.msg.msgType==msgTypes.RED&&this.msg.extras.type==redTypes.BOMB
			}
		},
		filters:{
			dateDiff,
			formatTime
		
		},
		props:{
			msg:{
				type:Object,
				required:true
			},
			hidename:{
				type:Boolean,
				default:false
			},
			chatType:{
				type:Number
			},
			showRead:{
				type:Boolean,
				default:true
			},
			showMine:{
				type:Boolean,
				default:true
			}
		},
		created(){
			this.master = DC.userDB.getUser(this.msg.from)
		},
		mounted() {
			if(this.showRead&&this.msg.from!=this.userId&&this.msg.readBody&&this.msg.readBody.unreadCount){
				const IO = uni.createIntersectionObserver(this.$parent,{thresholds:[0.1]}).relativeTo('#scrollView')
				IO.observe(`#msg_${this.msg.id}`,({intersectionRatio})=>{
					if(intersectionRatio>0.1){
						this.$emit('appear',()=>{
							IO.disconnect()
						})
					}
				})
			}
		},
		methods:{
			isLink(msg){
				console.log(msg)
				const result=isContainsLink(msg.content)
				console.log(msg.content,result)
				return result
			},
			onTouchstart({touches:[{clientX,clientY}]}){
				this.startPoint.x = clientX
				this.startPoint.y = clientY
				this.isMove = false
			},
			onTouchmove({touches:[{clientX,clientY}]}){
				if(Math.abs(clientX-this.startPoint.x)+Math.abs(clientY-this.startPoint.y)>10){
					this.isMove = true
				}
			},
			tapMsg(){
				this.$emit('tapMsg',this.msg)
			},
			tapAvatar(){
				this.$emit('tapAvatar',this.msg)
				
			},
			longAvatar(){
				(!this.isMove)&&this.$emit('longAvatar',this.msg,this.master)
			},
			menu({touches:[{clientX,clientY}]}){
				(!this.isMove)&&this.$emit('menu',{x:clientX,y:clientY})
			},
			readedText(){
				
				if(!this.msg.readBody||isNaN(this.msg.readBody.unreadCount)){
					return ''
				}
				const diff = this.msg.readBody.unreadCount
				if(diff<1){
					return '已读'
				}
				if(ConversationType.Single==this.chatType){
					return '未读'
				}else{
					return `${diff}人未读` 
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg{
		
		&_col{
			display: flex;
			padding: 20rpx 10rpx 20rpx 30rpx;
			.readed{
				opacity: 0;
			}
			&.self{
				justify-content: flex-end;
				padding: 20rpx 30rpx 20rpx 10rpx;
				.readed{
					opacity: 1;
				}
				.msg{
					&_avatar{
						order: 3;
					}
					&_top{
						justify-content: flex-end;
					}
					&_nick{
						order: 3;
					}
					&_content{
						justify-content: flex-end;
					}
					&_det{
						order: 3;
					}
				}
			}
		}
		&_avatar{
			align-self: flex-start;
		}
		&_body{
			order:1;
			margin: 0 20rpx;
		}
		&_top{
			display: flex;
			align-items: flex-end;
			margin-bottom: 10rpx;
		}
		&_nick{
			order: 1;
			color: $uni-text-color-placeholder;
		}
		&_time{
			order: 2;
			margin: 0 10rpx;
			color: $uni-text-color-disable;
		}
		&_content{
			display: flex;
			align-items: flex-end;
		}
		&_det{
			order: 1;
		}
		&_state{
			order: 2;
			margin: 0 10rpx;
			flex-shrink: 0;
		}
	}
</style>
